<!--
 * @Description: dom引用
 * @Author: zzj
 * @Date: 2021-10-10 17:46:09
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-10 18:14:43
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>dom引用</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
	<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
</head>
<body>
	<div id="app">
		<div>{{name}}</div>
		<button @click="addHandler">添加</button>
		<div ref="container">
			hello
		</div>
	</div>

	<script>
		const { Line } = G2Plot;
		new Vue({
			el:"#app",
			data:{
				name:"dom引用",
				dd: [
					{ year: '1991', value: 3 },
					{ year: '1992', value: 4 },
					{ year: '1993', value: 3.5 },
					{ year: '1994', value: 5 },
					{ year: '1995', value: 4.9 },
					{ year: '1996', value: 6 },
					{ year: '1997', value: 7 },
					{ year: '1998', value: 9 },
					{ year: '1999', value: 13 },
				],
				line:null
			},
			mounted(){
				this.renderChart();
			},
			methods:{
				//添加数据
				addHandler(){
					this.dd.push({year:"2000",value:18});
					if(this.line){
						this.line.changeData(this.dd)
					}
				},
				renderChart(){
					//获取dom节点
					let dom = this.$refs.container;
					dom.style.height = "200px"; 
					this.line = new Line(dom, {
						data:this.dd,    
						xField: 'year',  //横坐标
						yField: 'value',
					});
					this.line.render();  //渲染
				}
			},
		})
	</script>
</body>
</html>